<template>
  <el-dialog
    :title="textMap[dialogStatus]"
    width="720px"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
  >
    <el-form
      ref="dataForm"
      :rules="rules"
      :model="form"
      label-position="right"
      label-width="100px"
      v-loading="confirmLoading"
    >
      <el-form-item label="上级字典" prop="parentId">
          <el-select
            v-model="form.parentId"
            clearable
            placeholder="请选择"
            @clear="handleClear"
            ref="selectParent"
            style="width: 100%;"
          >
            <el-option hidden key="parentId" :value="form.parentId" :label="parentName"></el-option>

            <el-tree
              :data="options"
              :props="defaultProps"
              :expand-on-click-node="false"
              :check-on-click-node="true"
              @node-click="handleNodeClick"
              default-expand-all
            >
            </el-tree>
          </el-select>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="key" label="键值">
            <el-input placeholder="请输入" v-model="form.key"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="value" label="键名">
            <el-input placeholder="请输入" v-model="form.value"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="字典名称" prop="name">
        <el-input placeholder="请输入" v-model="form.name"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item prop="category" label="字典分类">
            <el-select
              multiple
              v-model="form.category"
              style="width: 100%"
              placeholder="请选择"
            >
              <el-option
                v-for="item in categoryList"
                :key="item.key"
                :label="item.value"
                :value="item.key"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="type" label="字典类型">
            <el-input placeholder="请输入" v-model="form.type"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="排序" prop="sort">
        <el-input placeholder="请输入" v-model="form.sort"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="remark">
        <el-input type="textarea" placeholder="请输入" v-model="form.remark" :rows="3"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">
        取消
      </el-button>
      <el-button type="primary" @click="submitForm">
        确认
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import formMixin from "@/mixins/form";
import request from "@/utils/request";
export default {
  name: "Dialog",
  mixins: [formMixin],
  components: {
  },
  data() {
    return {
      textMap: {
        update: "修改字典",
        create: "新增字典"
      },
      rules: {
        parentId: [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ],
        name: [
          {
            required: true,
            message: "请输入",
            trigger: "change"
          }
        ],
        category: [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ],
        type: [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ],
        sort: [
          {
            required: true,
            message: "请选择",
            trigger: "change"
          }
        ],
      },
      qusLibList: [],
      qusTypeList: [],
      Urls: {
        qusLibListUrl: "/api/question/lib/list",
        addUrl: "/api/exam/other/insert",
        editUrl: "/api/exam/update/",
        getByIdUrl: "/api/exam/detail/get/"
      },
      categoryList: [
        {
          key: 'tree',
          value: '树'
        },
        {
          key: 'dict',
          value: '字典'
        },
      ],

      options: [
        {
          parentId: '0',
          id: 'A',
          name: 'label A',
          children: [
            {
              parentId: '0',
              id: 'A-1',
              name: 'label A-1',
            }
          ]
        },
        {
          parentId: '1',
          id: 'B-1',
          name: 'label B-1',
        }
      ],
      parentName: '',
      defaultProps: {
        children: 'children',
        label: 'name'
      }
  }
  },
  watch: {
    /* "form.examQusList": {
      handler(newVal, oldVal) {
        if (newVal.length > 0) {
          let total = 0;
          this.form.examQusList.map(item => {
            total = total + (item.qusNum || 0) * (item.qusScore || 0);
          });
          this.form.totalScore = total;
        }
      },
      deep: true
    } */
  },
  methods: {
    handleNodeClick(data) {
      this.parentName = data.name
      this.form.parentId = data.id
      this.$refs.selectParent.blur()
    },
    handleClear() {
      this.parentName = ''
      this.form.parentId = ''
    },
    // 取值
    getValue(value){
      this.valueId = value
      console.log(this.valueId);
    },
    beforeOpen() {

    },
    resetForm() {
      this.form = {
        parentId: 'A'
      };
    },
    fillForm(data) {

    },
    formatData(data) {
      let form = Object.assign({}, data);

      return form;
    },
    // 获取题库
    getQusLibList() {
      request({
        url: this.Urls.qusLibListUrl,
        method: "get"
      })
        .then(res => {
          console.log("form list", res);
          if (res.code == 0) {
            this.qusLibList = res.data.records || [];
          } else {
            that.$notify({
              title: "提示",
              message: res.msg,
              type: "error",
              duration: 2000
            });
          }
        })
        .catch(err => {
          that.dialogFormVisible = false;
        });
    },

  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {}
};
</script>
<style lang="scss" scoped>
.line {
  text-align: center;
}
</style>
